<template>
    <div>
        <br/><br>
        <Navbar title="购物车页面"></Navbar>
        <!-- 头部标识 -->
        <header>我是购物车页面</header>
        
        <div class="container">
            <!-- 项目div用来渲染 列表数据 -->

            <div class="item" v-for="(item,index) in shopCarList" :key="item.id">
                <mt-cell-swipe
                    title=""
                    :right="[
                        {
                        content: '删除',
                        style: { background: 'red', color: '#fff'},
                        handler: () => del(item.id)
                        }]">>
                    <div>
                        <!-- 店铺区域 图标div -->
                        <div class="logo">

                        </div>
                        <!-- 内容区域 -->
                        <div class="details">
                            <!-- 商品图片 -->
                            <img :src="item.img"/>
                            <!-- 商品信息 -->
                            <div class="details_list">
                                <!-- 商品名 -->
                                <span>{{item.title}}</span>

                                <div class="list_more">
                                    <!--商品信息  -->
                                    <span>{{item.info}}</span>  
                                </div>

                                <div class="list_price">
                                    <!-- 价格 -->
                                    <span>价格:{{item.price}}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 购买数量 -->
                        <div class="num">
                            <span>购买数量</span>
                            <button @click="subShopCar(index)">-</button>
                            <input type="number" v-model="item.num"/>
                            <button @click="addShopCar(index)">+</button>
                        </div>
                    </div>
                </mt-cell-swipe>
            </div>  
        </div> 
        <footer fixed>
            <div class="footer_left">
                实际付款:
                <span>{{numPrice}}</span>
            </div>
            <div class="footer_right">
                立即付款
            </div>
        </footer> 
    </div>  
</template>
<script>
import {Toast} from "mint-ui"
import { del } from "vue"
    
    export default{
        name:"Shopcar",
        data(){
            return{
                shopCarList:[],
                numPrice:0//获取价格
            }
        },
        created(){
            this.getShopCarList()
        },
        updated(){
            this.allShopPrice()
        },
        methods:{
            // 获取购物车列表函数 调用接口拿到数据渲染页面
            getShopCarList(){
                this.$axios.get("/selectCarList")
                .then(res=>{
                    this.shopCarList = res.data
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            // 计算总价格函数
            allShopPrice(){
                //定义总价格
                let totalPrice = 0 
                this.shopCarList.forEach((item,index)=>{
                    totalPrice += item.num * item.price
                })
                this.numPrice = parseInt(totalPrice)
            },
            // 点击减少货物
            // a为商品ID
            subShopCar(a){
                // 通过下标拿到对应商品对象
                let subshop = this.shopCarList[a]
                // 操作商品对象的值
                if(subshop.num<1){
                    return
                }
                subshop.num --
               
            },
            // 点击添加货物
            addShopCar(a){
                let addshop = this.shopCarList[a]
                // 操作商品对象的值
                addshop.num++  
            },
            // 将下标传给id  删除货物车
            del(id){
                this.$axios.get("/delShopcar",{
                    params:{
                        id:id
                    }
                }).then(res=>{
                    Toast(res.data)
                    // 删除完刷新页面
                    this.getShopCarList()
                }).catch(err=>{
                    console.log(err)
                })  
            }
        }
    }  
</script>
<style lang="css" scoped>
    body {
        margin:0;
        padding: 0;
        background: white;
    }
    header {
        height: 50px;
        width: 100%;
        text-align: center;
        line-height: 50px;
        /* margin-top: -50px; */
        border-bottom: 1px solid #ccc;
        background: white;
    }

    .container{
        background: #fff;
        margin-bottom: 120px;
    }
    .item{
        padding: 0 10px;
        border: 1px solid #ccc;
    }
    .logo{
        height: 40px;
        display: flex;
        align-items: center;
    }
    .logo img{
        width: 20px;
        height: 20px;
        margin-left: 5px;
    }
    .logo span{
        margin-left: 5px;
        font-size: 12px;
    }
    .details{
        background: #f5f5f5;
        padding: 15px;
        font-size: 12px;
        display: flex;
    }
    .details img{
        width: 100px;
        height: 90px;
    }
    .details_list{
        margin-left: 15px;
        color: black;
    }
    .list_more{
        color: #888;
    }
    .details_list span{
        display: block;
        margin-top: 3px;
    }
    .list_price{
        color: red;
        font-size: 16px;
    }
    .num{
        color: #888;
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }
    .num button{
        width: 31px;
        height: 25px;
        background: #e0e0e0;
        border: none;
        outline: none;
    }
    .num input{
        width: 55px;
        height: 25px;
        border: none;
        text-align: left;
        background: #fff;
    }

    footer{
        width:100%;
        height: 50px;
        position: fixed;
        bottom: 60px;
        left:0;
        background: pink;
        border-top: 1px solid #ccc;
        display: flex;
    }
    .footer_left{
        flex:1;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        padding-right: 10px;
    }
    .footer_left span{
        color: red;
    }
    .footer_right{
        background: red;
        color: white;
        width: 150px;
        line-height: 50px;
        text-align: center;
    }
    .mint-cell-wrapper{
        margin-left: -30px;
    }
    .mint-cell-swipe-button{
         line-height: 150px;
    }
    .else_data{
        color: red;
        text-align: center;
        line-height: 200px;
    }
</style>